<template>
	<view class="team">
		<u-navbar back-icon-color="#FFFFFF" title-color="#FFFFFF" :border-bottom="false"
			:background="{background:'#0A0A25'}" :title="i18n.MyCommunity"></u-navbar>
		<view class="he4"></view>
		<view class="info">
			<view class="flex aic ">
				<image src="@/static/add/logo.png" mode="widthFix" style="width: 100rpx;"></image>
				<view class="mg-l-10">
					<view class="">{{getLoginInfo.address.slice(0,4)}}...{{getLoginInfo.address.slice(-14)}}</view>
					<view class="gray999 f24 mg-t-20">{{i18n.Membershiplevel}}:{{getLoginInfo.name}}</view>
				</view>
			</view>
			<view class="he4"></view>
			<view class="fsb text-a mg-l-40 mg-r-40 tmpadd-40">
				<view class="">
					<view class="f50">{{direct}}</view>
					<view class="mg-t-20">{{i18n.turnout}}</view>
				</view>
				<view class="">
					<view class="f50">{{team_num}}</view>
					<view class="mg-t-20">{{i18n.communityteam}}</view>
				</view>
			</view>
		</view>

		<view class="info tem" v-for="(item,index) in list" :key="index">
			<view class="fsb text-a">
				<view class="">
					<view class="f36">{{item.direct}}</view>
					<view class="mg-t-10">{{i18n.turnout}}</view>
				</view>
				<view class="rt">
					<view class="f24">{{i18n.communityteam}}</view>
					<view class="f36 mg-t-10">{{item.team_num}}</view>
				</view>
			</view>
			<view class="mg-t-30">{{i18n.address}}：{{item.username.slice(0,3)}}...{{item.username.slice(-14)}}</view>
			<view class="mg-t-10">{{i18n.ugrade}}：{{item.level_name}}</view>
			<view class="he3"></view>
		</view>

		<view class="he4"></view>

	</view>
</template>

<script>
	var that
	import {
		_updataTabBar,
		pageto,
		fetch
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				user: {},
				list: [],
				total: 0,
				direct: 0,
				team_num: 0,
				page: 1,
				limit: 20,
				status: 'loadmore',
				iconType: 'flower',
			}
		},
		onLoad() {

		},
		onShow() {
			this.getData()
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getLv',
				'getRequestUrl',
				'getLangType',
				'getLoginInfo'
			]),
		},
		methods: {
			...mapMutations([
				'setLv',
				'setLoginInfo',
				'setLogin',
				'setLangType',
			]),

			// 获取数据
			getData(show = true) {
				that = this
				if (show) {
					that.page = 1
					that.list = []
				}
				that.$postAjax('Member/my_team', {
					page: that.page,
					limit: that.limit
				}, function(res) {
					that.total = res.data.total

					let finData = res.data.list.data
					// if (that.page == 1) {
					// 	that.list = finData
					// 	that.direct = res.data.direct
					// 	that.team_num = res.data.team_num
					// } else {
					// 	that.list = that.list.concat(finData)
					// }
					// if (that.total <= that.page * that.limit) {
					// 	that.status = 'nomore';
					// }
					
					that.list = finData
					that.direct = res.data.direct
					that.team_num = res.data.team_num
					that.status = 'nomore';
					// if (that.page == 1) {
					// 	that.list = finData
					// 	that.direct = res.data.direct
					// 	that.team_num = res.data.team_num
					// } else {
					// 	that.list = that.list.concat(finData)
					// }
					// if (that.total <= that.page * that.limit) {
					// 	that.status = 'nomore';
					// }
				})
			},
			pageto(url, pp) {
				pageto(url, pp);
			},
		},
		onReachBottom() {
			if (this.total <= this.page * this.limit) {
				this.status = 'nomore';
				return
			}
			this.status = 'loading';
			this.page += 1
			this.getData(false)
		},
	}
</script>

<style lang="scss" scoped>
	.team {
		color: #FFFFFF;
		min-height: 100vh;
		background-image: url(@/static/add/team-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;

		.info {
			margin: 0 30rpx;
			padding: 40rpx 30rpx 30rpx;
			border-radius: 30rpx;
			background-color: rgba(236, 239, 255, .3);
			box-shadow: inset -4rpx -4rpx 6rpx 2rpx rgba(236, 239, 255, .3);
			backdrop-filter: blur(10px);
		}

		.rt {
			padding: 20rpx 40rpx;
			border-radius: 20rpx;
			background-color: rgba(0, 0, 0, .3);
		}

		.tem {
			margin: 50rpx 30rpx;
		}
	}
</style>